<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style14-08.css" />
		<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<!--[if lte IE 7]>
		<link rel="stylesheet" href="style14-08-ie.css" />
		<![endif]-->
		<title>Zozor - Carnets de voyage</title>
	</head>
	
	<body>
		<div id="bloc_page">
			<header>
				<div id="titre_principal">
					<img src="images/zozor_logo.png" alt="Logo de Zozor" id="logo" />
					<h1>Zozor</h1>
					<h2>Carnets de voyage</h2>
				</div>
				<nav>
					<ul>
						<li><a href="#">Accueil</a></li>
						<li><a href="#">Blog</a></li>
						<li><a href="#">CV</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</nav>
			</header>
			
			<div id="banniere_image">
				<div id="banniere_description">
					Retour sur mes vacances aux Etats-Unis...
					<a href="#" class="bouton_rouge">Voir l'article<img src="images/flecheblanchedroite.png" alt="" /></a>
				</div>
			</div>
			
			<section>
				<article>
					<h1>
						<img src="images/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie"  />
						Je suis un grand voyageur
					</h1>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum 
						elementum ipsum, id rhoncus metus varius non. Ut nec neque a ante congue rutrum
						sit amet id magna. Nulla eu odio mi. Cras ut felis eget purus placerat cursus. 
						Proin varius quam a euismod dictum. Proin congue turpis id nunc ultricies, non 
						sodales lorem laoreet. Proin tempus, turpis eu convallis elementum, ligula justo
						dignissim nisl, et tincidunt augue diam ut dui. Nulla fringilla viverra orci id 
						mollis. Integer suscipit porttitor felis non vehicula. Praesent nec est non
						tellus consequat lacinia. Proin consequat viverra leo vitae mollis. Donec 
						ultrices non mi non placerat. Suspendisse turpis sapien, scelerisque vitae 
						facilisis eu, interdum feugiat sapien. Phasellus dapibus adipiscing nisi quis 
						tempor. Mauris at pharetra nisi, sit amet cursus neque.
					</p>
					<p>
						Curabitur rhoncus quis lorem vel iaculis. Fusce ac tempor nunc. Integer fermentum
						neque vel lacus porttitor porta. Quisque bibendum neque non neque iaculis, nec 
						facilisis erat rhoncus. Nulla cursus pretium arcu. Maecenas iaculis condimentum 
						diam, non sagittis odio ultrices nec. Praesent at placerat quam. Donec mattis 
						non enim vel mattis. Nam ut nisl ultrices, porta dui et, facilisis lorem. Nam 
						vitae purus varius, fringilla magna id, suscipit ipsum. Nunc ullamcorper 
						sollicitudin nisl et hendrerit. Interdum et malesuada fames ac ante ipsum primis 
						in faucibus. Sed mauris leo, pulvinar ut nisl quis, rutrum aliquam elit.
					</p>
					<p>
						Curabitur rhoncus quis lorem vel iaculis. Fusce ac tempor nunc. Integer fermentum 
						neque vel lacus porttitor porta. Quisque bibendum neque non neque iaculis, nec 
						facilisis erat rhoncus. Nulla cursus pretium arcu. Maecenas iaculis condimentum 
						diam, non sagittis odio ultrices nec. Praesent at placerat quam. Donec mattis 
						non enim vel mattis. Nam ut nisl ultrices, porta dui et, facilisis lorem. Nam 
						vitae purus varius, fringilla magna id, suscipit ipsum. Nunc ullamcorper 
						sollicitudin nisl et hendrerit. Interdum et malesuada fames ac ante ipsum 
						primis in faucibus. Sed mauris leo, pulvinar ut nisl quis, rutrum aliquam elit.
					</p>
				</article>
				<aside>
					<h1>A propos de l'auteur</h1>
					<img src="images/bulle.png" alt="" id="fleche_bulle" />
					<p id="photo_zozor"><img src="images/zozor_classe.png" alt="Photo de Zozor" /></p>
					<p>Laisse-moi le temps de me présenter : je m'appelle Zozor, je suis né un 23 novembre 2005.</p>
					<p>
						Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie (ou zBiographique, comme vous voulez !)
						afub que les zéros sachent qui je suis réellement.
					</p>
					<p>
						<img src="images/facebook.png" alt="Facebook">
						<img src="images/twitter.png" alt="Twitter">
						<img src="images/vimeo.png" alt="Vimeo">
						<img src="images/flickr.png" alt="Flickr">
						<img src="images/rss.png" alt="RSS">
					</p>
				</aside>
			</section>
			
			<footer>
				<div id="tweet">
					<h1>Mon dernier tweet</h1>
					<p>Hiii haaaaan!</p>
					<p>Le 12 mai à 23h12</p>
				</div>
				<div id="mes_photos">
					<h1>Mes photos</h1>
					<p>
						<img src="images/photo1.jpg" alt="Photographie" />
						<img src="images/photo2.jpg" alt="Photographie" />
						<img src="images/photo3.jpg" alt="Photographie" />
						<img src="images/photo4.jpg" alt="Photographie" />
					</p>
				</div>
				<div id="mes_amis">
					<h1>Mes amis</h1>
					<ul>
						<li><a href="#">Pupi le lapin</a></li>
						<li><a href="#">Mr Baobab</a></li>
						<li><a href="#">Kaiwaii</a></li>
						<li><a href="#">Perceval.eu</a></li>
					</ul>
					<ul>
						<li><a href="#">Bemette</a></li>
						<li><a href="#">Le concombre masqué</a></li>
						<li><a href="#">Ptit prince</a></li>
						<li><a href="#">Mr Fan</a></li>
					</ul>
				</div>
			</footer>
		</div>
	</body>
</html>